<template>
	<div>
		<el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/EquipmentManagement'}"><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>试验设备</el-breadcrumb-item>
      <el-breadcrumb-item v-if="this.$route.query.sign === 'add'"><i class="el-icon-menu" style="margin-right: 15px;font-size: 16px"></i>新增设备</el-breadcrumb-item>
      <el-breadcrumb-item v-if="this.$route.query.sign === 'view'"><i class="el-icon-menu" style="margin-right: 15px;font-size: 16px"></i>设备详情</el-breadcrumb-item>
      <el-breadcrumb-item v-if="this.$route.query.sign === 'edit'"><i class="el-icon-menu" style="margin-right: 15px;font-size: 16px"></i>编辑设备</el-breadcrumb-item>    
    </el-breadcrumb>
    <div class="info">
			<el-card shadow="always">
        <el-row style="border-left: 9px solid #6C59DD; padding-left: 5px;"><span style="font-size: 20px;color:#6C59DD; padding-left: 10px;">基础信息</span></el-row>
        <el-form :model="equipInfoForm" ref="equipInfoForm" label-width="130px" size="small" style="margin: 10px 40px 0 20px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备名称：" prop="equipmName" :rules="[{ required: true, message: '请输入设备名称', trigger: 'blur' },{ validator: valiEmptyDate, trigger: 'blur'}]">
                <el-input v-if="this.$route.query.sign !== 'view'" placeholder="请输入设备名称" v-model="equipInfoForm.equipmName" clearable></el-input>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.equipmName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备型号：" prop="equipmModel" :rules="[{ required: true, message: '请输入设备型号', trigger: 'blur' },{ validator: valiEmptyDate, trigger: 'blur'}]">
                <el-input v-if="this.$route.query.sign !== 'view'" placeholder="请输入设备型号" v-model="equipInfoForm.equipmModel" clearable></el-input>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.equipmModel}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备编号：" prop="equipmNumber" :rules="[{ required: true, message: '请输入设备编号', trigger: 'blur' },{ validator: valiEmptyDate, trigger: 'blur'}]">
                <el-input v-if="this.$route.query.sign !== 'view'" placeholder="请输入设备编号" v-model="equipInfoForm.equipmNumber" clearable></el-input>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.equipmNumber}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备规格：" prop="equipSpecif" :rules="[{ required: true, message: '请输入设备规格', trigger: 'blur' },{ validator: valiEmptyDate, trigger: 'blur'}]">
                <el-input v-if="this.$route.query.sign !== 'view'" placeholder="请输入设备规格" v-model="equipInfoForm.equipSpecif" clearable></el-input>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.equipSpecif}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属工位：" prop="workePosit" :rules="{ required: true, message: '请选择所属工位', trigger: 'change' }">
                <el-select v-if="this.$route.query.sign !== 'view'" v-model="equipInfoForm.workePosit" placeholder="请选择所属工位" style="width:100%" clearable>
                  <el-option v-for="item in stationInfo" :key="item.station_id" :label="item.station_name" :value="item.station_id"></el-option>
                </el-select>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.workePosit}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="有效日期：" prop="timeSelect" :rules="{ required: true, message: '请选择日期', trigger: 'change' }">
                <el-date-picker clearable v-if="this.$route.query.sign !== 'view'" v-model="equipInfoForm.timeSelect" :picker-options="pickerOptions" type="date" placeholder="选择日期" style="width:100%" value-format="yyyy-MM-dd"></el-date-picker>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.timeSelect}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否点检：" prop="whetherCheck" :rules="{ required: true, message: '请选择是否点检', trigger: 'change' }">
                <el-select v-if="this.$route.query.sign !== 'view'" v-model="equipInfoForm.whetherCheck" placeholder="请选择是否点检" style="width:100%" clearable>
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.whetherCheck}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备用途" prop="equipPurpose" :rules="{ required: true, message: '请选择设备用途', trigger: 'change' }">
                <el-select v-if="this.$route.query.sign !== 'view'" v-model="equipInfoForm.equipPurpose" placeholder="请选择设备用途" style="width:100%" clearable>
                  <el-option label="试验" value="0"></el-option>
                  <el-option label="其他" value="1"></el-option>
                </el-select>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.equipPurpose}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备类型：" prop="equipKind" :rules="{ required: true, message: '请选择设备类型', trigger: 'change' }">
                <el-select clearable v-if="this.$route.query.sign !== 'view'" v-model="equipInfoForm.equipKind" @change="changeEquipModel" placeholder="请选择设备类型" style="width:100%">
                  <el-option v-for="item in equipAllParams" :key="item.ik_id" :label="item.instr_kind" :value="item.ik_id"></el-option>
                </el-select>
                <span v-if="this.$route.query.sign === 'view'">{{equipInfoForm.equipKindView}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-for="(rowItem,rowIndex) in equipInfoForm.equipParams" :key="rowIndex">
            <el-col :span="8" v-for="(colItem,colIndex) in rowItem" :key="colIndex">
              <el-form-item v-if="colItem.param_name !== null" :label="colItem.param_name+'：'" :prop="'equipParams['+rowIndex+']['+colIndex+'].paramVal'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur'},{ validator: validateValue, trigger: 'blur'}]">
                <el-input v-if="$route.query.sign !== 'view'" placeholder="请输入参数值" v-model="colItem.paramVal" clearable></el-input>
                <span v-if="$route.query.sign === 'view'">{{colItem.paramVal}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item v-if="this.$route.query.sign !== 'view'" style="text-align:center;margin-top: 20px">
            <el-button plain @click="cancelChange" class="textBtn" style="width:140px">取消</el-button>
            <el-button type="primary" class="saveButton" @click="verify('equipInfoForm')" style="width:140px;margin-left: 40px">保存</el-button>
          </el-form-item>
        </el-form>
			</el-card>
		</div>
	</div>
</template>
<script>
import sessionStorage from '../../public/storage.js';
export default {
	data() {
		return {
      validateValue : (rule, value, callback) => {
        if (/[\u4e00-\u9fa5\n\s*\r]/.test(value)) {
          callback(new Error('输入值非法，不能包含汉字和空格字符'));
        }
        callback();
      },
      valiEmptyDate : (rule, value, callback) => {
        if (!/^[^\s].*/.test(value)) {
          callback(new Error('首字符不可为空格等空字符'));
        }
        callback();
      },
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      equipInfoForm: {
        equipmNumber: '', // 设备编号
        equipmName: '', // 设备名称
        equipmModel: '', // 设备型号
        workePosit: '', // 工位名称
        timeSelect: '', // 时间选择
        equipSpecif: '', // 设备规格
        equipKind: '', // 设备类型
        whetherCheck: '', // 是否点检
        equipParams: [], // 设备参数
        equipKindView: '', // 查看设备类型
        equipPurpose: '' // 设备用途
      },
      oldEquipKind: '', // 旧设备类型
      equipAllParams: [], // 所有设备类型参数
      stationInfo: [], // 工位信息列表
		};
	},
	methods: {
    // 初始化根据入口不同进行相应赋值
    init(){
      this.getEquipParams();
      if(this.$route.query.sign !== 'add'){ // 查看和编辑
        this.equipInfoForm.equipmNumber = this.$route.query.instrNumber;
        this.equipInfoForm.equipmName = this.$route.query.instrName;
        this.equipInfoForm.equipmModel = this.$route.query.model;
        this.equipInfoForm.timeSelect = this.$route.query.expDate;
        this.equipInfoForm.equipSpecif = this.$route.query.spec;
        this.oldEquipKind = this.$route.query.equipKindId;
        this.equipInfoForm.whetherCheck = this.$route.query.ifCheck;
        this.equipInfoForm.equipPurpose = this.$route.query.equipPurpose;
        if(this.$route.query.sign === 'view'){ // 查看
          this.equipInfoForm.equipPurpose==='0'? this.equipInfoForm.equipPurpose='试验':this.equipInfoForm.equipPurpose='其他'
          this.equipInfoForm.workePosit = this.$route.query.stationName;
          this.equipInfoForm.whetherCheck==='0'? this.equipInfoForm.whetherCheck='否':this.equipInfoForm.whetherCheck='是';
          this.equipInfoForm.equipKindView = this.$route.query.equipKind;
        }
      }
    },
    // 显示对应设备类型下的参数
    changeEquipModel(){
      const index = this.equipAllParams.findIndex((value) => {
        return value.ik_id == this.equipInfoForm.equipKind;
      });
      this.equipInfoForm.equipParams=this.equipAllParams[index].children;
    },
    // 获取设备参数，编辑或查看显示测试参数值
    async getEquipParams(){
      const params = {
        sign: this.$route.query.sign
      }
      if (this.$route.query.sign !== 'add') {
        params.instrId = this.$route.query.instrId;
        params.equipKind = this.$route.query.equipKindId;
      }
      const ret = await this.$http.get("/equipManagement/getEquipParams",{params,});
      this.equipAllParams = ret.result;
      if (this.$route.query.sign !== 'add') {
        this.equipInfoForm.equipKind = this.$route.query.equipKindId;
        this.changeEquipModel();
      }
    },
    // 取消修改
    cancelChange(){
      this.$router.push({
        path: '/EquipmentManagement',
      });
    },
    //获取工位数据
		async getStationInfo(){
			const ret = await this.$http.get("/equipManagement/getStationInfo");
			this.stationInfo = ret.result;
      if(this.$route.query.sign === 'edit'){  //编辑对其赋默认值
        this.equipInfoForm.workePosit = Number(this.$route.query.stationId);
      }
		},
    // 保存或修改设备参数信息
    async saveInstrumentInfo() {
      this.$message({ message: '正在保存修改!', type: 'success', duration: 1000 });
      let ret;
      let params = {
        equipmNumber: this.equipInfoForm.equipmNumber,
        instrId: this.$route.query.instrId
      }
      // 判断设备编号是否重复
      ret = await this.$http.get("/equipManagement/judgeInstrumentNumber",{params,});
      params = {
        'equipInfoForm': this.equipInfoForm,
      }
      if (this.$route.query.sign === 'edit') { // 更新
        params.instrId = this.$route.query.instrId;
        params.oldEquipKind = this.oldEquipKind;
        ret = await this.$http.post("/equipManagement/updateInstrumentInfo",params);
      } else { // 新增
        ret = await this.$http.post("/equipManagement/saveInstrumentInfo",params);
      }
      if(ret.code === 200){
        this.$message({ message: '保存成功!', type: 'success', duration: 1000 });
        this.$router.push({
          path: '/EquipmentManagement',
        });
      }
    },
    // 保存前数据验证
    verify(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveInstrumentInfo();
        }
      });
    },
	},
	mounted() {
    this.getStationInfo();
    this.init();
	}
};
</script>
<style lang="scss" scoped>
@import "./AddEquipment.scss";
</style>